<template>
    <el-table :data="filterTableData" style="width: 100%">
        <el-table-column label="编号" prop="roleID" />
        <el-table-column label="姓名" prop="roleName" />
        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="Type to search" />
            </template>
            <template #default="scope">
                <el-button type="success" @click="handleDelete(scope.$index, scope.row)">查看</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[2, 4, 6, 8]"
        layout="total, sizes, prev, pager, next, jumper" :total="totalCount" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    <!-- 弹出框 -->
    <el-dialog v-model="dialogVisible" title="添加">
        <el-form :model="form">
            <input type="hidden" v-model="form.id">
            <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth">
                <el-input v-model="form.age" autocomplete="off" placeholder="请输入年龄" />
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="form.sex">
                    <el-radio label="男        " />
                    <el-radio label="女        " />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="班级" :label-width="formLabelWidth">
                <el-input v-model="form.class" autocomplete="off" placeholder="请输入所在班级" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="Add()">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import axios from 'axios'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const tableData = ref([]);
const search = ref("");
//分页数据
const currentPage = ref(1); //第几页
const pageSize = ref(5); //行数
const totalCount = ref(0);
// 在搜索框输入时触发筛选
const filterTableData = computed(() => {
    return tableData.value.filter(
        (data) =>
            !search.value ||
            (data.roleName &&
                data.roleName.toLowerCase().includes(search.value.toLowerCase()))
    );
});
const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
    pageSize.value = val
    select();
}
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
    currentPage.value = val
    select();
}
onMounted(() => {
    select();
})
//数据
function select() {
    axios({
        method: 'get',
        url: ' https://localhost:7052/api/Role/GteRoleList?pagesize=' + pageSize.value + "&pagenumber=" + currentPage.value,
        //https://localhost:7052/api/Role/GteRoleList?name=%E5%BC%A0&pagenumber=5&pageSize=10
    }).then((res) => {
        tableData.value = res.data.data;
        totalCount.value = res.data.totalCount
    });
}
</script>
<style lang='scss'>
</style>